<template>
	<view class="content">
		<view class="mainTitle">
			车俩信息
		</view>
		<view class="carInfo box">
			<car-item :cartInfo='orderInfo.cartInfo'></car-item>
		</view>
		<view class="mainTitle">
			洗车方案
		</view>
		<view class="carInfo box">
			<plan-item :planInfo='orderInfo.washMenu'></plan-item>
		</view>
		<view class="allPrice">
			<text class="all">合计:&nbsp;</text>
			<text class="dw">￥</text>
			<text class="price">{{orderInfo.washMenu.cost}}</text>
		</view>
		
		<view class="box" style="margin-bottom: 20rpx;">
			<view class="soli-item">
				<view class="title">订单号</view>
				<view class="value">{{orderInfo.sn}}</view>
			</view>
			<view class="soli-item">
				<view class="title">服务地址</view>
				<view class="value">
					<view>{{orderInfo.fullAddress}}</view>
					<image :src="$getImageSrc('home_ic_dw.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="soli-item">
				<view class="title">联系人</view>
				<view class="value" @click="$callPhone(orderInfo.linkPhone)">
					<view>{{orderInfo.linkman}}&nbsp;&nbsp;{{orderInfo.linkPhone}}</view>
					<image :src="$getImageSrc('phone.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="soli-item">
				<view class="title">服务时间</view>
				<view class="value">{{orderInfo.serviceDateStr}}</view>
			</view>
		</view>
		<view class="soli-item box" style="width: 686rpx;margin-bottom: 200rpx;">
			<text class="title">备注</text>
			<text class="value">{{orderInfo.remark}}</text>
		</view>
		<view class="footer">
			<button class="btn" @click="jdFn" type="default">我要接单</button>
		</view>
		<my-popup
		   ref="myPopup"
		   tipInfo="是否确认接单？请合理安排时间,避免迟到." 
		   leftBtn="取消"
		   rightBtn="确认接单"
		   @clickFn="sureOrder"
		></my-popup>
	</view>
</template>

<script>
	import {receiveOrder } from '@/untils/api'
	export default {
		data() {
			return {
				orderInfo:null
			};
		},
		methods:{
			jdFn(){
				this.$refs.myPopup.$refs.myPopup.open()
			},
			sureOrder(type){
			  if(type === 'right'){
				receiveOrder({sn:this.orderInfo.sn}).then((res) => {
					if(res.code === 200){
						uni.showToast({
							icon:'none',
							title:'接单成功'
						})
						uni.switchTab({
							url:'/pages/takeOrder/index'
						})
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			  }
			}
		},
		onShow() {
			this.orderInfo = this.$getStorageSync('orderInfo') || null;
			if(!this.orderInfo){
				uni.switchTab({
					url:'/pages/takeOrder/index'
				})
			}
		},
		onUnload(){
			this.$removeStorageSync('orderInfo')
		}
	}
</script>

<style lang="scss" scoped>
  .content{
	  background: #F8F8F8;
	  height: 100%;
	  overflow: auto;
	  .order-step{
		  margin-bottom: 40rpx;
	  }
	  .carInfo{
		  margin-top: 40rpx;
		  margin-bottom: 20rpx;
	  }
	  .mainTitle{
		  width: 686rpx;
		  margin: 0 auto;
	  }
	  .refund{
		  margin-bottom: 40rpx;
		  .refund-tip{
			  font-size: 28rpx;
			  color: #AEB3B3;
			  text-indent: 20rpx;
			  line-height: 80rpx;
		  }
	  }
	  .soli-item{
		  width: 96%;
		  display: flex;
		  line-height: 80rpx;
		  border-bottom: 1px solid #F8F8F8;
		  justify-content: space-between;
		  align-items: flex-start;
		  margin: 0 auto;
		  font-size: 30rpx;
		  .title{
			  width: 200rpx;
			  color: #2a2b2b;
			  text-indent: 20rpx;
		  }
		  .value{
			  text-align: right;
			  color: #AEB3B3;
			  width: calc(100% - 220rpx);
			  word-wrap: break-word;
			  display: flex;
			  justify-content: flex-end;
			  align-items: center;
			  image{
				  width: 30rpx;
				  margin-left: 8rpx;
				  // height: 30rpx;
			  }
		  }
		  .phone{
			  color: #02B1AA;
			  margin-right: 20rpx;
		  }
	  }
	  .allPrice{
		  width: 686rpx;
		  margin: 0 auto 20rpx;
		  text-align: right;
		  .all{
			  font-weight: 800;
			  font-size: 30rpx;
			  color: #2A2B2B;
		  }
		  .dw{
			  font-size: 24rpx;
			  color: #F96501;
		  }
		  .price{
			  font-size: 40rpx;
			  color: #F96501;
		  }
	  }
	  .footer{
		  height: 180rpx;
		  
		  .btn{
			  width: 240rpx;
			  height: 88rpx;
			  background: #02B1AA;
			  line-height: 88rpx;
			  float: right;
			  color: #fff;
			  margin-top: 50rpx;
			  margin-right: 60rpx;
			  font-size: 32rpx;
		  }
	  }
  }
</style>
